<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户注册数据统计</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <div class="ctc_title">用户注册数据统计</div>
    <div class="down_line"></div>
</section>
<!-- Main content -->
<section class="content" >
    <div class="row" >
        <input type="hidden" id="flag" value="0">
        <div style="float: right">
            <button class="btn btn-block btn-primary" onclick="getToday()">今日注册人数</button>
            <button class="btn btn-block btn-primary" onclick="getTotal()">平台注册总人数</button>
        </div>
        <div id="container" style="min-width:500px;height:500px;margin-top: 8em"></div>

    </div>
</section>
<script>

    //初始化数据
    $(document).ready(function() {
        registerData();
    });

    //查看今日数据
    function getToday() {
        $("#flag").val(1);
        registerData();
    }

    //平台注册中人数
    function getTotal() {
        $("#flag").val(0);
        registerData();
    }

    //请求后台接口，加载数据
    function registerData() {
        var flag = $("#flag").val();
        $.ajax({
            type:"POST",
            url:"/dataStatist/registerData",
            async : true,//默认就是true
            dataType:"json",
            data:{
                flag : flag
            },
            success:function(result){
                result = result.data.dataList
                var textName;
                if(flag == 0){
                    textName="平台注册总人数";
                }else{
                    textName="今日平台注册人数";
                }
                if(result.length == 0){
                    layer.msg("注册人数为0", {shift: -1, time: 1000}, function(){
                    });
                }
                showData(textName,result);
            },
            failure:function(result) {
                alert('网络错误！');
            },
        });
    }

    //显示数据
   function showData(textName,data){
       Highcharts.chart('container', {
           chart: {
               plotBackgroundColor: null,
               plotBorderWidth: null,
               plotShadow: false,
               type: 'pie'
           },
           title: {
               text: textName
           },
           tooltip: {
               // pointFormat: '{series.name}: <b>{series.y:.1f}人</b>'
           },
           plotOptions: {
               pie: {
                   allowPointSelect: true,
                   cursor: 'pointer',
                   dataLabels: {
                       enabled: false
                   },
                   showInLegend: true,
                   dataLabels: {
                       enabled: true,
                       formatter: function() {
                           //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                           return '<span style="color: ' + this.point.color + '"> 人数：'
                               + this.y + '，占比' + this.percentage.toFixed(1) + '%</span>';
                       }
                   }
               }
           },
           series: [{
               name: '人数',
               colorByPoint: true,
               data:data
           }]
       });
   }
</script>
</body>
</html>